(function($) {
	$.fn.MyPicSlider = function(options) {
		// 插件的代码
		
		// 在return语句之前，通常需要对传递进来的参数对象进行预先处理
		// 现在，经过扩展后，settings对象就是后面程序中要使用的参数对象
		var settings = $.extend({
			direction:'left',
			speed:600,
			interval:1000
		},options);

		// 声明一个对象，例如methods，该对象有一些方法，执行插件具体的工作
		var methods = {
			timer :null,
			
			// 如：init方法执行初始化工作
			init:function() {
				// 这里的this代表某个DOM对象，如.box，自定义属性保存
				// 自己内部图片的个数
				this.imgCount = $(this).children('.slider').find('img').length;
				// 单张图片的宽度
				//console.log(this);
				this.singleWidth = $(this).children('.slider').find('img').width();
				//单张图片的高度
				this.singleHeight = $(this).children('.slider').find('img').height();
				// slider的原始高度
				this.oldSliderHeight = this.imgCount * this.singleHeight;
				// slider的原始宽度
				this.oldSliderWidth = this.imgCount * this.singleWidth;
				// 当前图像的索引
				this.currIndex = 0;
				// 最后图像的索引
				this.lastIndex = this.imgCount - 1;
				$(this).children('.slider').find('ul').append($(this).children('.slider').find('li:first').clone());
				$(this).children('.slider').width(this.oldSliderWidth + this.singleWidth);
			},
			clearTimer:function(){
				clearTimeout(methods.timer);
				methods.timer = null;
			},
			
			moveLeft:function() {
				var _this = this;
				// 如果当前显示的图像已经超过了最后一张，那么说明现在显示
				// 的是克隆的那张图像（与第一张相同），那么应该立即复位，才能保证下次向左的滚动
				if (this.currIndex > this.lastIndex) {
					// 立即复位
					$(this).children('.slider').css('left','0px');
					this.currIndex = 0;
				} 
				this.currIndex++;
				var nowX = -1 * this.currIndex * this.singleWidth;
				$(this).children('.slider').stop().animate({
					left: nowX
				},settings.speed,function() {
					methods.timer = setTimeout(function() {
						// 下面的this代表window对象，而不代表我们
						// 期望的box，为了解决这个问题，我们应该预先
						// 声明一个变量，来保存那个真正的DOM对象，
						// 例如 box。于是，我们声明了_this，这里拿来用
						methods.moveLeft.call(_this);
					},settings.interval);
				});
			},
			moveRight:function() {
				var _this = this;
				
				if (this.currIndex <= 0) {
					// 立即复位
					$(this).children('.slider').css('left',-1 * this.oldSliderHeight + 'px');
					this.currIndex = this.lastIndex + 1;
				} 
				this.currIndex--;
				var nowX = -1 * this.currIndex * this.singleWidth;
				$(this).children('.slider').stop().animate({
					left: nowX
				},settings.speed,function() {
					methods.timer = setTimeout(function() {
						// 下面的this代表window对象，而不代表我们
						// 期望的box，为了解决这个问题，我们应该预先
						// 声明一个变量，来保存那个真正的DOM对象，
						// 例如 box。于是，我们声明了_this，这里拿来用
						methods.moveRight.call(_this);
					},settings.interval);
				});
			},
			moveUp:function() {
				var _this = this;
				if (this.currIndex > this.lastIndex) {
					// 立即复位
					$(this).children('.slider').css('top','0px');
					this.currIndex = 0;
				} 
				this.currIndex++;
				var nowX = -1 * this.currIndex * this.singleHeight;
				$(this).children('.slider').stop().animate({
					top: nowX
				},settings.speed,function() {
					methods.timer = setTimeout(function(){
						methods.moveUp.call(_this);
					},settings.interval);
				});
			},
			moveDown:function() {
				var _this = this;
				if (this.currIndex <= 0) {
					// 立即复位
					$(this).children('.slider').css('top',-1 * this.oldSliderWidth + 'px');
					this.currIndex = this.lastIndex + 1;
				} 
				this.currIndex--;
				var nowX = -1 * this.currIndex * this.singleHeight;
				$(this).children('.slider').stop().animate({
					top: nowX
				},settings.speed,function() {
					methods.timer = setTimeout(function(){
						methods.moveDown.call(_this);
					},settings.interval);
				});
			}
		};


		// this代表jQuery对象，不需要用$(this)表示，为每一个
		// DOM对象执行匿名函数，加一个return，再把jQuery对象返回，
		// 可以为链式调用做好准备
		return this.each(function() {
			// 绝大部分的插件代码都在这里完成
			// 调用init方法，完成初始化工作
			methods.init.call(this);
			if (settings.direction === 'left') {
				methods.moveLeft.call(this);
			} else if(settings.direction === 'right') {
				methods.moveRight.call(this);
			}else if(settings.direction === 'top') {
				methods.moveUp.call(this);
			}else if(settings.direction === 'down'){
				methods.moveDown.call(this);
			}
			
			
			$(this).mouseenter(function(){
				//$(_this).stop()
				methods.clearTimer.call(this);
			}).mouseleave(function(){
				var _this = this;
				if (this.direction === 'right') {
					methods.timer = setTimeout(function() {
						
						methods.moveRight.call(_this);
					},settings.interval);
					//methods.moveRight.call(this);
				} else if (settings.direction === 'left'){
					methods.timer = setTimeout(function() {
						
						methods.moveLeft.call(_this);
					},settings.interval);
					//methods.moveLeft.call(this);
				}
				
			});
		});
	}
})(jQuery);






